<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <title></title>
    <meta http-equiv="Content-type" content="text/html;charset=UTF-8" />

    <link rel="stylesheet" href="../../resources/lib/jquery/jcrop/jquery.Jcrop.css" />

    <script type="text/javascript" src="../../resources/lib/jquery/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="../../resources/lib/jquery/jcrop/jquery.Jcrop.js"></script>

    <script th:inline="javascript" type="text/javascript">
        /*<![CDATA[*/
        /**
         * 应用程序URL根路径
         * @type {string}
         * @const
         */
        var BASE_URL = /*[[@{/}]]*/ '/';
        /*]]>*/

    </script>
</head>
<body>
<div style="width:865px;">
    <div style="margin-bottom:10px;">
        <h4>Preview pane:</h4>
        <div style="overflow: hidden; width: 200px; height: 200px;">
            <img id="preview" src="http://www.script-tutorials.com/demos/13/files/image.jpg"/>
        </div>
    </div>

    <img src="http://www.script-tutorials.com/demos/13/files/image.jpg" id="cropbox1" />

    <form action="index.php" method="post" onsubmit="return checkCoords();">
        <div style="margin:5px;">
            <label>X1 <input type="text" name="x" id="x" size="4"/></label>
            <label>Y1 <input type="text" name="y" id="y" size="4"/></label>
            <label>X2 <input type="text" name="x2" id="x2" size="4"/></label>
            <label>Y2 <input type="text" name="y2" id="y2" size="4"/></label>
            <label>W <input type="text" name="w" id="w" size="4"/></label>
            <label>H <input type="text" name="h" id="h" size="4"/></label>
        </div>

        <div style="margin:5px;">
            <input type="submit" value="Crop Image" />
        </div>
    </form>
</div>

<script type="text/javascript">

    $(function(){
        // for sample 1
        $('#cropbox1').Jcrop({ // we linking Jcrop to our image with id=cropbox1
            setSelect: [ 0, 0, 260, 390],// 身份证大头照
            minSize: [260, 390],
            aspectRatio: 1,// 等比例
            onChange: updateCoords,
            onSelect: updateCoords
        });

/*        // for sample 2
        var api = $.Jcrop('#cropbox2',{ // we linking Jcrop to our image with id=cropbox1
            setSelect: [ 100, 100, 200, 200 ]
        });
        var i, ac;

        // A handler to kill the action
        function nothing(e) {
            e.stopPropagation();
            e.preventDefault();
            return false;
        };

        // Returns event handler for animation callback
        function anim_handler(ac) {
            return function(e) {
                api.animateTo(ac);
                return nothing(e);
            };
        };

        // Setup sample coordinates for animation
        var ac = {
            anim1: [0,0,40,600],
            anim2: [115,100,210,215],
            anim3: [80,10,760,585],
            anim4: [105,215,665,575],
            anim5: [495,150,570,235]
        };

        // Attach respective event handlers
        for(i in ac) jQuery('#'+i).click(anim_handler(ac[i]));

        // for sample 3
        $('#cropbox3').Jcrop({ // we linking Jcrop to our image with id=cropbox3
            setSelect: [ 20, 130, 480, 230 ],
            addClass: 'jcrop_custom',
            bgColor: 'blue',
            bgOpacity: .5,
            sideHandles: false,
            minSize: [ 50, 50 ]
        });*/
    });

    function updateCoords(c) {
        $('#x').val(c.x);
        $('#y').val(c.y);
        $('#w').val(c.w);
        $('#h').val(c.h);

        $('#x2').val(c.x2);
        $('#y2').val(c.y2);


        var rx = 200 / c.w; // 200 - preview box size
        var ry = 200 / c.h;

        $('#preview').css({
            width: Math.round(rx * 800) + 'px',
            height: Math.round(ry * 600) + 'px',
            marginLeft: '-' + Math.round(rx * c.x) + 'px',
            marginTop: '-' + Math.round(ry * c.y) + 'px'
        });
    };

    function checkCoords() {
        if (parseInt($('#w').val())) return true;
        alert('Please select a crop region then press submit.');
        return false;
    };


</script>
</body>
</html>